<template>
  <el-row class="mod-log" style="width:80%;margin:0 auto;">
    <!-- <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form> -->
    <h2 class="title">bug列表</h2>
    <!-- 选择器 -->
    <el-row class="select">
      <span class="title">请选择状态：</span>
      <el-select v-model="value" placeholder="请选择" @change="change">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-row>
    <!-- bug列表 -->
    <el-table 
        :data="dataList" 
        highlight-current-row 
        layout="total, prev, pager, next"
        style="width: 100%; margin-top:20px;">
        <el-table-column prop="bugs_title" label="bug标题" width="120" sortable>
        </el-table-column>
        <el-table-column prop="bugs_description" label="bug描述" width="140" sortable>
        </el-table-column>
        <el-table-column prop="bugs_content" label="bug内容" width="140" sortable>
        </el-table-column>
        <el-table-column prop="bugs_createtime" label="bug创建时间" width="150" sortable>
        </el-table-column>
        <el-table-column prop="bugs_gettime" label="bug获取时间" width="150" sortable>
        </el-table-column>
        <el-table-column prop="bugs_updatetime" label="bug更新时间" width="140" sortable>
        </el-table-column>
        <el-table-column prop="bugs_endtime" label="bug修复时间" width="160" sortable>
        </el-table-column>
        <el-table-column prop="bugs_status" label="bug状态" min-width="180" :formatter="formatStatus" sortable>
        </el-table-column>
        <el-table-column prop="b_u_name" label="发起人" min-width="180" sortable>
        </el-table-column>
        <el-table-column prop="b_su_name" label="指定人" min-width="180" sortable>
        </el-table-column>
        <el-table-column prop="b_p_title" label="bug所属项目" min-width="180" sortable>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
            <template slot-scope="scope">
                <el-button type="danger" size="small" @click="showDetail(scope.row)">查看</el-button>
                <el-button type="danger" size="small" @click="handleFinish(scope.row)">完成</el-button>
                <el-button type="danger" size="small" @click="showEdit(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next">
    </el-pagination>
  </el-row>
</template>

<script>
import axios from "axios";
const ERR_OK = 1;
export default {
  data() {
    return {
      dataForm: {
        key: ""
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      dataListLoading: false,
      selectionDataList: [],
      options: [
        {
          value: 1,
          label: "修复中"
        },
        {
          value: 2,
          label: "已完成"
        }
      ],
      value: "",
      pageSize: 5
    };
  },
  created() {
    this._getDataList();
  },
  methods: {
    formatStatus(row) {
      return row.status === 1 ? "未完成" : "已完成";
    },
    // 获取数据
    change(val) {
      this._getDataList(val);
    },
    // 传入bug详情页
    showDetail(row) {
      this.$router.push({
        path: "/bugDetail",
        name: "bugDetail",
        params: {
          id: row.bugs_id
        }
      });
    },
    // 传入bug编辑页
    showEdit(row) {
      let status = row.status === "未完成" ? 1 : 2;
      let params = [row.bugs_id, status].join("/");
      this.$router.push({
        path: "/editBug",
        name: "editBug",
        params: {
          uid: params
        }
      });
    },
    // 获取数据列表
    _getDataList(bugs_status) {
      let msg = localStorage.getItem("loginMsg");
      let id = JSON.parse(msg).huser_id;
      const url = "api/bugs/index.html";
      const params = {
        pageNumber: this.pageIndex,
        pageSize: 10,
        searchText: "",
        bugs_suid: id,
        bugs_status: bugs_status ? bugs_status : ""
      };
      axios.post(url, params).then(res => {
        if (res.data) {
          this.total = res.data.total;
          this.dataList = res.data.rows;
        }
      });
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this._getDataList();
    },
    // 点击完成bug
    handleFinish(row) {
      const url = "api/bugs/finisedBug";
      const params = {
        bugs_id: row.bugs_id
      };
      this.$confirm(`确认完成[bug修改]操作吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios
          .post(url, params)
          .then(res => {
            if (res.data.code === ERR_OK) {
              console.log(res.data);
              this._getDataList();
              this.$notify({
                title: "成功",
                message: res.data.msg,
                position: "top-left",
                type: "success"
              });
            } else {
              this.$notify({
                title: "失败",
                message: res.data.msg,
                position: "top-left",
                type: "error"
              });
            }
          })
          .catch(e => e);
      });
    }
  }
};
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
.mod-log {
  text-align: center;

  .title {
    margin-top: 20px;
  }

  .select {
    margin-top: 30px;

    .title {
      margin-right: 10px;
    }
  }
}
</style>
